<template>
  <component
    :is="all[modelValue.type]"
    ref="propertyEditor"
    :value="modelValue"
    :code="code"
    :key-options="keyOptions"
    @typeChange="typeChange"
  />
</template>
<script>
import SelectProperty from './SelectProperty.vue'
import IconSelectProperty from './IconSelectProperty.vue'
import InputProperty from './InputProperty.vue'
import ColorPickerProperty from './ColorPickerProperty.vue'
import RadioProperty from './RadioProperty.vue'
import CheckboxProperty from './CheckboxProperty.vue'
import InputNumberProperty from './InputNumberProperty.vue'
import SwitchProperty from './SwitchProperty.vue'
import SelectTreeProperty from './SelectTreeProperty.vue'
import DateTimeProperty from './DateTimeProperty.vue'
import ImgProperty from './ImgProperty.vue'
import FileProperty from './FileProperty.vue'
import DividerProperty from './DividerProperty.vue'
import CardProperty from './CardProperty.vue'
import TabProperty from './TabProperty.vue'
import TextAreaProperty from './TextAreaProperty.vue'
import ProvinceProperty from './ProvinceProperty.vue'
import CascaderProperty from './CascaderProperty.vue'
import RateProperty from './RateProperty.vue'
import SliderProperty from './SliderProperty.vue'
import TagProperty from './TagProperty.vue'
import TransferProperty from './TransferProperty.vue'
import TreeProperty from './TreeProperty.vue'
import { shallowRef } from 'vue'
export default {
  name: 'Item',
  components: {
    TransferProperty,
    TreeProperty,
    RateProperty,
    CascaderProperty,
    ProvinceProperty,
    TextAreaProperty,
    SelectProperty,
    TabProperty,
    DividerProperty,
    RadioProperty,
    FileProperty,
    InputProperty,
    ImgProperty,
    CheckboxProperty,
    InputNumberProperty,
    SwitchProperty,
    SelectTreeProperty,
    DateTimeProperty,
    SliderProperty,
    IconSelectProperty,
    TagProperty,
    ColorPickerProperty
  },
  props: {
    keyOptions: {
      required: false,
      type: Array,
      default: () => []
    },
    modelValue: {
      required: false,
      type: Object,
      default: () => {}
    },
    code: {
      type: Boolean,
      required: false,
      default: false
    },
    onSave: {
      required: true,
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      all: {
        select: shallowRef(SelectProperty),
        input: shallowRef(InputProperty),
        radio: shallowRef(RadioProperty),
        checkbox: shallowRef(CheckboxProperty),
        inputNumber: shallowRef(InputNumberProperty),
        switch: shallowRef(SwitchProperty),
        selectTree: shallowRef(SelectTreeProperty),
        datetime: shallowRef(DateTimeProperty),
        img: shallowRef(ImgProperty),
        file: shallowRef(FileProperty),
        divider: shallowRef(DividerProperty),
        card: shallowRef(CardProperty),
        tab: shallowRef(TabProperty),
        textarea: shallowRef(TextAreaProperty),
        province: shallowRef(ProvinceProperty),
        cascader: shallowRef(CascaderProperty),
        iconSelect: shallowRef(IconSelectProperty),
        rate: shallowRef(RateProperty),
        slider: shallowRef(SliderProperty),
        tag: shallowRef(TagProperty),
        transfer: shallowRef(TransferProperty),
        tree: shallowRef(TreeProperty),
        colorPicker: shallowRef(ColorPickerProperty)
      }
    }
  },
  methods: {
    typeChange(v) {
      // eslint-disable-next-line vue/no-mutating-props
      this.modelValue.type = v
    },
    save() {
      this.$refs.propertyEditor.save((c1) => {
        this.onSave(c1)
      })
    }
  }
}
</script>
